import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// 子组件之间互相传递数据

// 父组件
class Parent extends Component{
    // 提供共享状态
    state = {
        count: 0
    }
    
    // 提供修改状态的方法
    onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render(){
        return (
            <div>
                <Child1 count={this.state.count} />
                <Child2 onIncrement={this.onIncrement} />
            </div>
        )
    }
}

// 子组件1
const Child1 = props => {
    return <h1>计数器:{props.count}</h1>
}
// 子组件2
const Child2 = props => {
    return <button onClick={() => props.onIncrement()}>+1</button>
}

ReactDOM.render(<Parent />, document.getElementById('root'))